<template>
  <view class="container">
    <view class="item">
      <!-- 作业科目 -->
      <view class="title">
        <view style="display: flex; align-items: center">
          <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #333333">语文作业</view>
          <view v-if="false" style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin-left: 20rpx">来自张老师</view>
        </view>
        <view style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333">今天(周三)12：00布置</view>
      </view>
      <!-- 截止日期或者提交状态 -->
      <view v-if="true" style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin: 28rpx 0 20rpx 0">
        提交截至：周四 12-12 12 :00
      </view>
      <view v-else style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999; margin: 28rpx 0 20rpx">已提交</view>
      <!-- 作业题目 -->
      <view class="worktitle">作业题目作业题目</view>
      <view style="display: flex; justify-content: flex-end">
        <view class="check" @click="goworkdetail">查看作业</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    goworkdetail() {
      uni.navigateTo({
        url: '/sub_user/workdetail/workdetail'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .item {
    box-sizing: border-box;
    width: 690rpx;
    height: 328rpx;
    margin: 30rpx;
    padding: 30rpx;
    background: #f5f7ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .worktitle {
    box-sizing: border-box;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #333333;
    border-bottom: 2rpx solid #e3e3e3;
    padding-bottom: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .check {
    box-sizing: border-box;
    width: 160rpx;
    height: 60rpx;
    margin-top: 20rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
